<template>
  <div class="upload-box">
    <el-upload
      :action="updateurl+'wx/file/fileUpload'"
      accept=".jpg, .jpeg, .png"
      list-type="picture-card"
      :file-list="fileList"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :limit="limit"
      :on-error="imgError"
      :on-success="imgSuccess"
      :disabled="disabled"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="50%" :src="dialogImageUrl" alt="img"/>
    </el-dialog>
  </div>
</template>
<script>
  import global from "@/views/Global";

  export default {
    data() {
      return {
        imgurl: global.imgUrl,
        updateurl:global.update,
        dialogImageUrl: "",
        dialogVisible: false,
        // imgurl: 'http://49.232.138.145:7241/mangshi/files/',
        // fileList: [],
      };
    },
    props: {
      limit: 0,
      fileList: '',
      disabled:false
    },
    watch: {
      sdata: {
        handler(val, oldVal) {
          this.fileList
        },
        immediate: true,
      }
    },
    methods: {
      //上传失败
      imgError(err, file, fileList) {
        this.$message.error(err);
      },
      imgSuccess(response, file, fileList) {
        // console.log(response, file, fileList)
        if (response.code == 0) {
          const item = {
            name: response.data.fileName,
            url: this.imgurl + response.data.fileName
          }
          // console.log(this.fileList1)
          this.fileList.push(item);
          this.$message({
            message: response.msg,
            type: "success"
          });
        } else {
          this.$message.error(response.msg);
          this.fileList = [];
        }
      },
      handleRemove(file, fileList) {
        // console.log(file, fileList);
        this.$emit('removed',file,fileList);
      },
      // handlePictureCardPreview(file) {
      //   this.dialogImageUrl = file.url;
      //   this.dialogVisible = true;
      // },
      beforeRemove(file, fileList) {
        fileList.forEach((element, index) => {
          if (element.name == file.name) {
            this.fileList.splice(index, 1);
          }
        });
        return this.$message({
          message: "删除成功",
          type: "success"
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
</style>
